<template>
  <div style="background: #fff">
    <div class="tab_menu">
      <div>
        <span v-for="(item,index) in menus" :class="{'choose':index===menuIndex}"
              @click="chooseMenu(index)">{{ item }}配置</span>
      </div>
    </div>
    <message v-if="menuIndex===0"></message>
    <voice v-if="menuIndex===1"></voice>
  </div>
</template>

<script>
import message from "./message";
import voice from "./voice";

export default {
  components: {
    message,
    voice,
  },
  data() {
    return {
      menus: ['短信', '语音'],
      menuIndex: 0,
    }
  },
  mounted() {

  },
  methods: {
    chooseMenu(index) {
      this.menuIndex = index;
    }
  }
}
</script>

<style scoped>
.tab_menu {
  padding: 10px;
}

.tab_menu div {
  height: 43px;
  display: flex;
  width: 100%;
  border-bottom: 2px solid #427EF1;
}

.tab_menu span {
  line-height: 43px;
  width: 120px;
  text-align: center;
  cursor: pointer;
}

.tab_menu .choose {
  background: #427EF1;
  color: #fff;
}


.address a {
  color: #427EF1;
  font-size: 14px;
  margin-left: 20px;
  cursor: pointer;
}
</style>
